<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
			<el-form-item label="课程">
				<el-select v-model="cid" placeholder="请选择课程">
					<el-option v-for="(c, index) in courseList" :value="c.name" @click.native="initChaper(c.name)">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属章节">
				<el-select v-model="dataForm.chapterId" placeholder="请选择章节">
					<el-option v-for="(p, index) in chaperList"  :value="p.id" :label="p.name" name="chapterId" >
						{{p.name}}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="题目类型">
				<el-select v-model="dataForm.typeId" placeholder="请选择类型">
					<el-option v-for="(t, index) in typeList"  :value="t.id" :label="t.name" name="typeId" @click.native="dataTypes(t.id)">
						{{t.name}}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="题目名称" >
				<el-input v-model="dataForm.title" placeholder="题目名称"></el-input>
			</el-form-item>

			<el-form-item v-for="(option, index) in dataForm.options" :label="'选项' + (index + 1)"  :rules="{
      required: true, message: '选项不能为空', trigger: 'blur'
    }">
				<el-input v-model="option.vals"></el-input>
				<el-button @click.prevent="removeDomain(option)">删除</el-button>
			</el-form-item>

			<el-form-item label="答案">
				<el-select  v-model="dataForm.answerId" placeholder="请选择" :multiple="multiple">
					<el-option v-for="(option, index) in dataForm.options"  :label="'选项' + (index + 1)" :value="index" @click.native="ck()">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="标签" >
				<el-input v-model="dataForm.label" placeholder="标签"></el-input>
			</el-form-item>
			<el-form-item label="分值">
				<el-input v-model="dataForm.score" placeholder="分值"></el-input>
			</el-form-item>
			<el-form-item label="解析" >
				<el-input v-model="dataForm.analysis" placeholder="解析"></el-input>
			</el-form-item>

			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit(1)">确定</el-button>
      <el-button type="primary" @click="dataFormSubmit(2)">确定并继续加题</el-button>
       <el-button @click="addDomain">新增选项</el-button>
          <el-button @click="resetForm('dataForm')">清空</el-button>
    </span>
	</el-dialog>
</template>
<script>
	import { isEmail, isMobile } from '@/utils/validate'

	export default {
		data() {
			return {
				visible: false,
				multiple: true,
				dataForm: {
					title: '',
					analysis: '',
					answerId: [],
					label: '',
					score: '',
					chapterId:'',
					typeId:0,
					options: [{vals:''}],
				},
				courseList: [],
				chaperList: [],
				typeList: [{
						id: '1',
						name: '单选'
					}, {
						id: '2',
						name: '多选'
					},
					{
						id: '3',
						name: '填空'
					}, {
						id: '4',
						name: '拖拽'
					}
				],
				cid: '请选择',
				dataRule: {}
			}
		},
		methods: {
			//   course/list

			init(id) {
				console.log(id);
				this.visible = true
				if(id != null) {
					console.log('修改');
				}
				//初始化课程列表
				this.initCourse();
			},
			initChaper(id) {
				console.log(id);
				//根据课程id初始化章节信息
				this.$http({
					url: this.$http.adornUrl('/chapter/list'),
					method: 'get',
					params: this.$http.adornParams({
						'page': 1,
						'limit': 9999,
						'courseName': id,
						'name': ''
					})
				}).then(({
					data
				}) => {
					if(data && data.code === 0) {
						this.chaperList = data.data
					}
				})
			},
			initCourse() {
				this.$http({
					url: this.$http.adornUrl('/course/list'),
					method: 'get',
					params: this.$http.adornParams({
						'page': 1,
						'limit': 9999,
						'username': ''
					})
				}).then(({
					data
				}) => {
					if(data && data.code === 0) {
						this.courseList = data.page.list;
					}
				})
			},
			dataFormSubmit(t) {
				if(!Array.isArray(this.dataForm.answerId)){
					var arr=[];
					arr.push(this.dataForm.answerId);
					this.dataForm.answerId=arr;
				}
				console.log(Array.isArray(this.dataForm.answerId));
				console.log(this.dataForm);
				this.$http({
					url: this.$http.adornUrl('/topic/save'),
					method: 'post',
					data: this.$http.adornData(this.dataForm)
				}).then(({
					data
				}) => {
					if(data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
						})
							console.log(t);
							if(t==2){
								this.dataForm.label='';
								this.dataForm.score='';
								this.dataForm.analysis='';
								this.dataForm.title='';
								this.dataForm.answerId=[];
								this.dataForm.options= [{vals:''}];
							}else{
								 this.visible = false
										            onClose: () => {
							                  this.visible = false
							                }
							}
							console.log(11111111111111);
						
					} else {
						this.$message.error(data.msg)
					}
				})
			},
			dataTypes(id) {
				if(id == 1) {
					//单选
//					this.multiple = false
				} else if(id == 2) {
					//多选
					this.multiple = true
				} else if(id == 3) {
					//填空
				} else if(id == 4) {
					//拖拽
				} else {}
			},
			ck(){
				if(this.dataForm.typeId==1){
							if(this.dataForm.answerId.length>1){
								console.log(this.dataForm.answerId.length);
									this.dataForm.answerId=[];
							}
							this.$message({
							message: '单选',
							type: 'success',
							duration: 1500,
						});
						
				}
			},
			removeDomain(item) {
				this.value = []
				const index = this.dataForm.options.indexOf(item)
				if(index !== -1) {
					this.dataForm.options.splice(index, 1)
				}
			},
			addDomain() {
				this.dataForm.options.push({
					value: '',
					key: Date.now()
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
			},

		}
	}
</script>